<template>
  <div>
   
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
     
      <!-- margin-left: 900px; -->
    
      <!--      新增按钮-->
      <el-button type="primary" style="font-size: 15px;padding-left:14px; width: 60px;" @click="add">新增</el-button>
    </div>

    <!--    列表展示-->
    <el-table :data="options" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
      <el-table-column prop="parentId" label="ID" width="180"> </el-table-column>
      <el-table-column prop="pname" label="父类型名称" width="160">
     
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="160"> </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row,0)">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="这是一段内容确定删除吗？" @confirm="deleteStudyBookTypeById(scope.row.parentId)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>



    <!--    列表展示-->
    <el-table :data="twoClassOptions" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
      <el-table-column prop="parentId" label="父类型名称" width="160">
        <template slot-scope="scope">
          {{ getParentTypeName(scope.row.parentId) }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="帖子类型名称" width="160">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间" width="180">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="160"> </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row,1)">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="这是一段内容确定删除吗？" @confirm="deleteStudyBookTypeById(scope.row.id)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="学习资料类型信息" :visible.sync="centerDialogVisible" width="30%" center :before-close="handleClose">
      <!--      新增或者修改类型信息表单-->
      <el-form ref="form" :rules="rules" :model="StudyTypeInfo" label-width="120px">
        <el-form-item label="帖子类型名称" prop="name">
          <el-col :span="15">
            <el-input v-model="StudyTypeInfo.name" placeholder="请输入帖子类型名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="父类型" prop="oneclass">
          <el-select v-model="StudyTypeInfo.parentId" placeholder="请选择父类型" readonly>
            <el-option v-for="item in optionsForNew" :key="item.parentId" :label="item.pname" :value="item.parentId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-radio-group v-model="StudyTypeInfo.sort">
            <el-input-number v-model="StudyTypeInfo.sort" controls-position="right" @change="handleChange"
              :min="0"></el-input-number>
          </el-radio-group>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllStudyType ,newStudyBookType,deleteStudyBookType,editStudyBookType} from "@/api/studyServices";
// import { del } from "@/api/q&aService/postTypeManagement/Delete";
// import { addOrUpdate } from "@/api/q&aService/postTypeManagement/addOrUpdate";
// import { firstLevelPostQuery } from "@/api/q&aService/postTypeManagement/firstLevelPostQuery";
// import { queryParentId } from "@/api/q&aService/postTypeManagement/queryParentId";
// import { queryAll } from "@/api/q&aService/postTypeManagement/queryAll";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "postTypeManagement",
  data() {

    return {
      test:0,
      hhh:0,
      optionsForNew: [{pname: "新增父类",  parentId:"0",sort:0}],
      StudyTypeInfo: {name: "", parentId: "",id:"",sort:0},
      options:[],
     xxzlpage:1,
     xxzllimit:50,
     xxzlqueryVo: {
        parentId: '',
        // 设置 typeId 为一个空数组，符合子类型集合的要求
        typeId: [],
        description: '',
        gmtCreate: '',
        gmtModified: '',
        id: '',
        isDeleted: false,
        name: ''
      },
     queryVo:{},
      num: 1,
      List: [],
      commentType: [],
      commentTypeLists: [],
      page: 1,
      limit: 5,
      total: 0,
      parentId: "",
      centerDialogVisible: false,
      id: "",
      form: {
        id: "",
        name: "",
        parentId: "",
        sort: 0,
      },
      rules: {
        // name: [{ required: true, message: "请输入类名", trigger: "blur" }],
        parentId: [{ required: true, trigger: "blur" }],
        // oneclass: [{ required: true, message: "请选择父类", trigger: "blur" }],
        // sort: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {

    editStudyBooKTypeById() {
      editStudyBookType(this.id,this.StudyTypeInfo).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "编辑成功",
            type: "success",
        })
        this.getAllStudy();} else {
          this.$message({
            message: "编辑失败",
            type: "error",
          });
        }
      });
    },


    deleteStudyBookTypeById(id) {
      deleteStudyBookType(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getAllStudy();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },

    newStudyBookTypeByParentId(){
      newStudyBookType(this.StudyTypeInfo).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.getAllStudy();
          this.centerDialogVisible = false;
        
        } else {
          this.$message({
            message: "新增失败",
            type: "error",
          });
        }
      });
    },
   
    getParentTypeName(hh){
    
      let arr = this.options.filter((item) => item.parentId === hh);
        return arr[0].pname;
      }
    ,
    

    getAllStudy() {
      this.test++;
     getAllStudyType().then((res) => {
      let data = []
        this.options=res.tree;
        this.optionsForNew= [{pname: "新增父类",  parentId:"0"}],
        this.optionsForNew=[...this.optionsForNew,...res.tree]
        this.twoClassOptions=this.options.forEach(item=>{data=[...data,...item.studyTypeList]});
        this.twoClassOptions=data;
      
     }); 
   },
    //将父类型id换成父类型名称，方便查看
    // getParentName(parentId) {
    //   const parent = this.commentType.find((c) => c.id === parentId);
    //   return parent.name
    // },
    // //排序的计数
    // handleChange(value) {
    //   console.log(value);
    // },
    //重置表单
    // resetForm() {
    //   this.$refs.form.resetFields();
    //   //将计数器的数字重置为1
    //   this.num = 1;
    // },

    //新增按钮
    add() {
      this.centerDialogVisible = true;
      this.StudyTypeInfo.parentId = "";
      this.StudyTypeInfo.name = "";
    },
    //修改
    mod(row,row2) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        if(row2===0){
          this.StudyTypeInfo.parentId = 0;this.StudyTypeInfo.name = row.pname;
          this.id = row.parentId;
        }
        else{
            this.StudyTypeInfo.parentId = row.parentId;
            this.StudyTypeInfo.name = row.name;
            this.id = row.id;
          }
      
      });
    },
    //删除
    // del(id) {
    //   del(id).then((res) => {
    //     if (res.code === 20000) {
    //       this.$message({
    //         message: "删除成功",
    //         type: "success",
    //       });
    //       this.centerDialogVisible = false;
    //       this.queryAll();
    //       this.delCommentTypeList(id);
    //     } else {
    //       this.$message({
    //         message: "删除失败",
    //         type: "error",
    //       });
    //     }
    //   });
    // },
   doMod() {
      this.StudyTypeInfo.id = this.id;
     this.editStudyBooKTypeById()
          this.centerDialogVisible = false;
         
          this.id = "";
          this.StudyTypeInfo.id = "";
    },
    doSave() {
      this.newStudyBookTypeByParentId()
      this.centerDialogVisible = false;

      //请求数据
     
    },
    //提交数据到后台
   save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.id) {
            //如果有id则修改
        this.doMod();
          } else {
            //否则增加
            this.doSave();
          }
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
          return false;
        }
      });
      this.id = "";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
  },

  created() {
    this.getAllStudy();
  },
  beforeMount() {
    this.queryAll()
  }}
</script>

<style scoped>
.pagination-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*background-color: #f5f5f5;*/
  padding: 10px 20px;
  /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  max-width: 800px;
  /* 设置最大宽度以避免在大屏幕上过分拉伸 */
  margin: 0 30%;
  /* 居中显示分页组件 */
}
</style>
